<template>
    <div
        style="width: 100%;height: 100%; background-color: #f2f2f2; display: flex;flex-direction: column;justify-content: start;align-items: center;">
        <div
            style="width: 95%; display: flex; flex-direction: column; justify-content: start; align-items: center; margin-top:2rem; background-color: white;">
            <div class="admin-header">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item class="firstItem">
                        <el-select v-model="formInline.region" style="width: 5rem;">
                            <el-option label="账号" value="账号" />
                            <el-option label="姓名" value="姓名" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="formInline.search" type="text" placeholder="请输入搜索内容" clearable />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">搜索</el-button>
                    </el-form-item>
                </el-form>
                <el-button type="primary" @click="addGuanLi">新建管理员</el-button>
            </div>

            <el-table :data="tableData" style="width: 95%;margin-top: 1rem;">
                <el-table-column fixed prop="account" label="管理员账号" />
                <el-table-column prop="name" label="名字" />
                <el-table-column prop="role" label="角色" />
                <el-table-column prop="remarks" label="备注" />
                <el-table-column prop="lastLoginTime" label="最后登录时间" />
                <el-table-column prop="lastLoginIp" label="最后登录ip">
                </el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template #default="{ row }">
                        <el-button link type="primary" size="small" @click="handleClick(row)">编辑</el-button>
                        <el-button link type="primary" size="small" @click="del(row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>


            <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[4, 6, 8]"
                :small="small" :disabled="disabled" background="true" layout="total, sizes, prev, pager, next, jumper"
                :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                style="margin-top: 5%;margin-bottom: 1rem;" />
        </div>
    </div>


    <!-- 添加弹出框 -->
    <el-dialog title="添加管理员" v-model="addDialog" width="30%">
        <el-form :model="addData">
            <el-form-item label="账号:" :label-width="formLabelWidth">
                <el-input v-model="addData.user" type="text" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码:" :label-width="formLabelWidth">
                <el-input v-model="addData.password" type="password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码:" :label-width="formLabelWidth">
                <el-input v-model="addData.surepassword" type="password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="姓名:" :label-width="formLabelWidth">
                <el-input v-model="addData.name" type="text" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注:" :label-width="formLabelWidth">
                <el-input v-model="addData.notes" type="text" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="角色:" :label-width="formLabelWidth">
                <el-select v-model="addData.role">
                    <el-option :label="v.name" :value="v.name" v-for="(v, i) in roleSelect" :key="i"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="addDialog = false">取 消</el-button>
                <el-button type="primary" @click="sureAdd">新增</el-button>
            </span>

        </template>
    </el-dialog>


    <!-- 删除框 -->
    <el-dialog title="确定要删除吗？" v-model="delDialog" width="30%">
        <template #footer>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delDialog = false">取 消</el-button>
                <el-button type="primary" @click="sureDel">确定</el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 修改弹出框 -->
    <el-dialog title="修改管理员" v-model="editDialog" width="30%">
        <el-form :model="editData">
            <el-form-item label="账号:" :label-width="formLabelWidth">
                <el-input v-model="editData.user" type="text" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码:" :label-width="formLabelWidth">
                <el-input v-model="editData.password" type="password" autocomplete="off"></el-input>
            </el-form-item>
            <!-- <el-form-item label="确认密码:" :label-width="formLabelWidth">
                <el-input v-model="editData.surepassword" type="password" autocomplete="off"></el-input>
            </el-form-item> -->
            <el-form-item label="姓名:" :label-width="formLabelWidth">
                <el-input v-model="editData.name" type="text" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注:" :label-width="formLabelWidth">
                <el-input v-model="editData.notes" type="text" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="角色:" :label-width="formLabelWidth">
                <el-select v-model="editData.role">
                    <el-option :label="v.name" :value="v.name" v-for="(v, i) in roleSelect" :key="i"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="editDialog = false">取 消</el-button>
                <el-button type="primary" @click="sureEdit">修改</el-button>
            </span>

        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { noticeTest, addAdmin, editAdmin, delAdmin, role } from '../api/Admin/AdminApi'
let currentPage4 = ref(1)
let pageSize4 = ref(6)
let total = ref(20)
let small = ref(false)
let disabled = ref(false)
let formInline = reactive({
    region: '账号',
    search: '',
})
let delId = ref<any>()
let editId = ref<any>()
let roleSelect = ref<any>([])
let formLabelWidth = '100px'
let addDialog = ref(false)
let editDialog = ref(false)
let delDialog = ref(false)
let addData: { user: string, password: string, surepassword: string, name: string, notes: string, role: string } = reactive({
    user: '',
    password: '',
    surepassword: '',
    name: '',
    notes: '',
    role: ''
})
let editData: { user: string, password: string, name: string, notes: string, role: string } = reactive({
    user: '',
    password: '',
    name: '',
    notes: '',
    role: ''
})

let tableData = reactive<any>([])

// 时间函数
let toDub = (n: any) => {
    if (n < 10) {
        return '0' + n
    } else {
        return '' + n
    }
}
let time = (v: any) => {
    let oDate = new Date(v);
    let y = oDate.getFullYear() //年
    let M = oDate.getMonth() + 1 //月 从0开始
    let d = oDate.getDate() //日
    let h = oDate.getHours() //h
    let m = oDate.getMinutes()//分钟
    let s = oDate.getSeconds()//秒
    return y + '-' + toDub(M) + '-' + toDub(d) + ' ' + toDub(h) + ':' + toDub(m) + ':' + toDub(s)
}

//渲染页面
let test = async () => {
    let { data }: { [propsName: string]: any } = await noticeTest({
        limit: pageSize4.value,
        page: currentPage4.value
    })
    if (data.code == 0) {
        tableData.length = 0
        tableData.push(...data.data)
        tableData.forEach((v: any) => {
            v.lastLoginTime = time(v.lastLoginTime)
        });
        // tableData.value = data.data
        total.value = data.count
    }
}

onMounted(() => {
    test()
})

// 添加管理员
let addGuanLi = async () => {
    let { data }: { [propsName: string]: any } = await role()
    if (data.code == 0) {
        console.log(data.data)
        roleSelect.value = data.data
        addDialog.value = true
    }
}

let sureAdd = async () => {
    let { data }: { [propsName: string]: any } = await addAdmin({
        account: addData.user,
        name: addData.name,
        password: addData.password,
        password2: addData.surepassword,
        remarks: addData.notes,
        role: addData.role
    })
    if (data.code == 0) {
        ElMessage({
            message: data.msg,
            type: 'success'
        })
        addDialog.value = false
        test()
    }
}

// 修改管理员
let sureEdit = async () => {
    let { data }: { [propsName: string]: any } = await editAdmin({
        account: editData.user,
        remarks: editData.notes,
        password: editData.password,
        name: editData.name,
        role: editData.role,
        id: editId.value
    })
    if (data.code == 0) {
        ElMessage({
            message: data.msg,
            type: 'success'
        })
        editDialog.value = false
        test()
    }
}

// 删除管理员
let sureDel = async () => {
    let { data }: { [propsName: string]: any } = await delAdmin({
        id: delId.value
    })
    if (data.code == 0) {
        ElMessage({
            message: data.msg,
            type: 'success'
        })
        delDialog.value = false
        test()
    }
}



const handleSizeChange = (val: number) => {
    test()
}
const handleCurrentChange = (val: number) => {
    test()
}

const onSubmit = () => {
    test()
}

const handleClick = async (row: any) => {
    let { data }: { [propsName: string]: any } = await role()
    if (data.code == 0) {
        console.log(data.data)
        roleSelect.value = data.data
    }
    console.log(row)
    editId.value = row.id
    editData.user = row.account
    editData.password = row.password
    editData.name = row.name
    editData.notes = row.remarks
    editData.role = row.role
    editDialog.value = true
}
let del = (v: any) => {
    console.log(v)
    delId.value = v.id
    delDialog.value = true
}

</script>

<style scoped lang="less">
.firstItem {
    margin-right: 0px;
    border: none;
}

.admin-header {
    width: 95%;
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
    align-content: center;
}
</style>